<!-- 方案生成 -->
<template>
  <view class="generate">

    <view class="generate-tip">
      <view class="tip-icon">
        <img v-if="isGenerating" src="../../static/customMode/loading.png" class="img loading-img">
        <img v-else src="../../static/customMode/success.png" class="img">
      </view>
      <view class="tip-content">
        <view class="tip-title">方案生成中</view>
        <view class="tip-describe">我们正在针对您提交的表单，为您生成独家方案 大约需要5-10秒钟，请耐心等待。</view>
      </view>

      <view class="btn cancel" v-if="isGenerating" @click="cancelGenerate">取消</view>
      <view @click="goList" class="btn view" v-if="!isGenerating">查看我的方案</view>
    </view>
  </view>
</template>

<script>
import requestV1 from "../../common/requestV1";
export default {
  data() {
    return {
      requestData: null,
      isGenerating: true,
      timer: null
    }
  },
  onLoad(e) {
    this.requestData = { ...e }
    this.generateMode()
  },
  methods: {
    async generateMode() {
      const data = await requestV1({
        url: '/footmarks2/plan_sumbit',
        method: 'post',
        data: this.requestData
      })
      if (data.code === 1) {
        this.timer = setTimeout(() => {
          this.isGenerating = false
        }, 5000)
      }
    },
    cancelGenerate() {
      this.timer && clearTimeout(this.timer)
      uni.navigateBack()
    },
    goList() {
      const queryString = `?name=${this.requestData.name}&type=${this.requestData.type}&area=${this.requestData.area}&toll=${this.requestData.toll}`
      uni.navigateTo({
        url: '/pages/schemeList/schemeList' + queryString
      })
    },
    goPage(url, links) {
      url = links
        ? url + '?url=' + links
        : url

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes loading {
  from {
    transform: rotate(0);
  }
  
  to {
    transform: rotate(360deg);
  }
}
.generate {
  height: 100vh;
  background-color: rgb(250, 250, 250);
  position: relative;

  .generate-tip {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);

    .tip-icon {
      position: relative;
      width: 252rpx;
      height: 252rpx;
      background: url("../../static/customMode/generateBg.png") center center;
      background-size: 100% 100%;
      margin: 0 auto 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .loading-img {
        animation: loading 1.5s infinite linear;
      }
      
      .img {
        width: 126rpx;
        height: 126rpx;
      }
    }

    .tip-content {
      margin-bottom: 62rpx;
      .tip-title {
        font-weight: 700;
        font-size: 29rpx;
        line-height: 51rpx;
        color: rgba(26, 26, 26, 1);
        text-align: center;
      }
      .tip-describe {
        width: 532rpx;
        color: rgba(102, 102, 102, 1);
        line-height: 60rpx;
        font-size: 25rpx;
        text-align: center;
        margin: 0 auto;
      }
    }
  }
  
  .btn {
    width: calc(100% - 72rpx);
    margin: 0 auto;
    color: #fff;
    font-weight: 600;
    font-size: 29rpx;
    height: 115rpx;
    line-height: 115rpx;
    border-radius: 36rpx;
    text-align: center;
  }
  .cancel {
    background-color: rgba(141, 143, 152, 1);
  }
  .view {
    background-color: rgba(55, 68, 134, 1);
  }
}
</style>
